<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加员工账号</title>
    <link rel="stylesheet" href="/scriptZIP/element-ui.index.min.css">
    <style scoped>
        .el-form-item__label {
            line-height: 20px;
        }

        .textarea_box {
            width: 600px;
            background-color: white;
            padding: 6px 0;
            border-radius: 6px;
        }

        .textarea_bottom {
            margin-top: 10px;
        }

        .textarea_p {
            line-height: 20px;
            margin: 0;
            padding-bottom: 4px;
            margin-left: 20px;
            box-sizing: border-box;
            width: 550px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #585858;
        }

        [v-cloak] {
            display: none;
        }

        .el-dialog__body {
            padding: 10px 20px;
            font-size: 15px;
            color: black;
        }

        .text_box_item {
            padding-bottom: 10px;
        }

        .addTime {
            font-size: 13px;
            text-align: right;
            color: #999;
        }
    </style>
</head>

<body>
    <div id="staffManagementItem" v-cloak>
        <el-skeleton :rows="6" animated v-if="loading"></el-skeleton>
        <el-form v-else ref="form" v-loading="loading" :rules="rules" :model="form" label-position="top" style="
        width: 600px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        font-weight: bold;
        justify-content: space-between;
    ">
            <el-form-item label="权限类型:">
                <el-radio-group v-model="form.type" style="width:280px" @input="typeInput">
                    <el-radio :label="2">单校</el-radio>
                    <el-radio :label="1">代理商</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="归属学校:" prop="schoolId" v-if="form.type==2">
                <el-select v-model="form.schoolId" clearable placeholder="请选择归属学校" @change="gerTeacher"
                    style="width:280px">
                    <el-option v-for="(item, i) in schoolList" :key="i" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联教师:" v-if="form.type==2">
                <el-select v-model="form.teacherId" clearable placeholder="请选择教师" style="width:280px">
                    <el-option v-for="(item, i) in teacherList" :key="i" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="员工姓名:" prop="name">
                <el-input v-model="form.name" style="width:280px" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
            <el-form-item label="出生年月日:">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday"
                    style="width:280px"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别:" prop="sex">
                <el-radio-group v-model="form.sex" style="width:280px">
                    <el-radio :label="0">男</el-radio>
                    <el-radio :label="1">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="婚姻状况:">
                <el-input v-model="form.matrimony" placeholder="婚姻状况" style="width:280px"></el-input>
            </el-form-item>
            <el-form-item label="联系方式:" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系方式（登录账号）" style="width:280px"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" style="width:280px"></el-input>
            </el-form-item>

            <el-form-item label="岗位:" prop="authId">
                <el-select v-model="form.authId" placeholder="请选择岗位" style="width:280px" @change="handleChange">
                    <el-option v-for="(item, i) in authList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学校分组:" prop="authId" v-if="form.type==1">
                <el-select v-model="form.schoolGroupId" placeholder="请选择岗位" style="width:280px" @change="handleChange">
                    <el-option v-for="(item, i) in schoolGroupList" :key="item.id" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="合同开始时间:" prop="startTime">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.startTime"
                    style="width:280px"></el-date-picker>
            </el-form-item>
            <el-form-item label="合同结束时间:" prop="endTime">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.endTime"
                    style="width:280px"></el-date-picker>
            </el-form-item>
            <el-form-item label="是否启用:">
                <el-switch v-model="form.enable" active-text="启用" inactive-text="停用" style="width:280px"></el-switch>
            </el-form-item>
            <el-form-item label="状态:" prop="status" v-if="add">
                <el-select v-model="form.status" :disabled="formdata.status==0" placeholder="请选择状态" style="width:280px">
                    <el-option label="离职" :value="0"></el-option>
                    <el-option label="在职" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态:" prop="status" v-else>
                <el-select v-model="form.status" :disabled="formdata.status==0" placeholder="请选择状态" style="width:280px">
                    <el-option label="在职" :value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="离职时间:" prop="turnoverTime" v-if="form.status==0">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="form.turnoverTime"
                    style="width:280px"></el-date-picker>
            </el-form-item>
            <el-form-item label="家庭住址:">
                <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item label="员工情况介绍:" style="width:600px">
                <div class="textarea_box" v-if="form.introOne.length">
                    <p class="textarea_p" v-for="(item,i) in form.introOne.slice(0,3)" :key="i">{{i+1}}.{{item.content}}
                    </p>
                </div>
                <div class="textarea_bottom">
                    <el-input type="textarea" v-model="inputValue"></el-input>
                    <div>
                        <el-button size="mini" type="primary" @click="quedingxieru()">确定保存介绍</el-button>
                        <el-button size="mini" @click="openShow" v-if="form.introOne.length">查看员工情况介绍</el-button>
                    </div>
                </div>

            </el-form-item>
            <el-form-item>
                <div style="display: flex;justify-content: center;width: 600px;">
                    <el-button v-if="!add" style="width: 130px;" type="primary" @click="onSubmit()">立即创建</el-button>
                    <el-button v-else style="width: 130px;" type="primary" @click="upload()">保存修改</el-button>
                    <el-button style="width: 130px;" @click="history.back()">取消</el-button>
                </div>

            </el-form-item>
        </el-form>

        <el-dialog title="编辑员工情况介绍" :visible.sync="show" width="60%" :before-close="handleClose">
            <div class="text_box">
                <div class="text_box_item" v-for="(item,i) in form.introOne" :key="i">
                    <div>{{i+1}}.{{item.content}}</div>
                    <div class="addTime">添加时间：{{item.times}}</div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="show = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/scriptZIP/elementui.index.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>
    <script>
        const checkPhone = (rule, value, callback) => {
            const reg = /^1[3456789]\d{9}$/;
            if (value === '') {
                callback(new Error('手机号不能为空'));
            } else if (!reg.test(value)) {
                callback(new Error('请输入正确的手机号'));
            } else {
                callback();
            }
        };
        var app = new Vue({
            el: '#staffManagementItem',
            data: {
                add: '',//空为添加
                show: false,
                inputValue: '',
                loading: true,
                schoolList: [],
                teacherList: [],
                authList: [],
                schoolGroupList:[],
                form: {
                    type: 2,
                    agentId: top_params().id,
                    enable: true,
                    introOne: [],
                },
                formdata: {},//原始值
                rules: {
                    schoolId: [
                        { required: true, message: '请选择归属学校', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { validator: checkPhone, trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' },
                        
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    authId: [
                        { required: true, message: '请选择岗位', trigger: 'blur' }
                    ],
                    startTime: [
                        { required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    endTime: [
                        { required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ],
                    turnoverTime: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
                }
            },
            created: function () {
                this.add = params().id
                this.getschool()
                this.gerAuth()
                this.getSchoolGruop()
                if (!this.add) return;
                axios.get('/pc/staffUser/' + this.add).then(function (res) {
                    var arr1 = { ...this.form, ...res.data }
                    var arr2 = { ...this.form, ...res.data }
                    this.form = JSON.parse(JSON.stringify(arr1)) //此处的作用是防止修改其中值会影响到formdata的值，导致判断修改哪些数据时出错
                    this.formdata = JSON.parse(JSON.stringify(arr2))
                    this.gerTeacher()
                    this.gerAuth()
                }.bind(this));
            },
            methods: {
                //解决下拉款选择值之后不显示问题
                handleChange() {
                    this.$forceUpdate()
                },
                //获取学校
                getschool: function () {
                    axios.get('/pc/school/all/' + top_params().id).then(function (res) {
                        this.schoolList = res.data
                        this.loading = false
                    }.bind(this));
                },
                //获取教师列表
                gerTeacher: function () {
                    if (!this.form.schoolId) {
                        this.form.teacherId = ''
                        this.teacherList = []
                        return;
                    }
                    axios.get('/pc/teacher/all/' + this.form.schoolId).then(function (res) {
                        this.teacherList = res.data
                    }.bind(this));
                },
                typeInput: function () {
                    this.form.authId = ''
                    if (this.form.type == 1) {
                        if (this.form.schoolId) {
                            this.form.schoolId = null
                        } else {
                            delete this.form.schoolId
                        }
                        if (this.form.teacherId) {
                            this.form.teacherId = ''
                        } else {
                            delete this.form.teacherId
                        }

                    }
                    this.gerAuth()
                    this.getSchoolGruop()
                },
                //获取岗位
                gerAuth: function () {
                    axios.get('/pc/auth/all/' + top_params().id + '/' + this.form.type).then(function (res) {
                        this.authList = res.data
                    }.bind(this));
                },
                getSchoolGruop: function () {
                    axios.get('/pc/schoolGroup/all/' + top_params().id).then(function (res) {
                        this.schoolGroupList = res.data
                    }.bind(this));
                },
                //修改信息
                upload: function () {
                    var changedValues = {};
                    for (var key in this.formdata) {
                        if (this.formdata.hasOwnProperty(key) && this.form.hasOwnProperty(key)) {
                            if (this.formdata[key] !== this.form[key]) {
                                changedValues[key] = this.form[key];
                            }
                        }
                    }
                    changedValues.id = this.form.id
                    if (this.form.authId == '') return this.$message.error("岗位不能为空");
                    if (this.form.type == 2 && !this.form.schoolId) return this.$message.error("归属学校不能为空");

                    if (this.form.type == 2) {
                        if (!changedValues.hasOwnProperty('schoolId')) {
                            changedValues.schoolId = this.formdata.schoolId
                        }
                        changedValues.agentId = null
                    } else {
                        if (!changedValues.agentId || !changedValues.hasOwnProperty('agentId')) {
                            changedValues.agentId = this.formdata.agentId
                        }
                    }
                    axios.put('/pc/staffUser', changedValues).then(function (res) {
                        this.show = false;
                        alert('修改成功');
                        history.back()
                    }.bind(this));
                },
                //立即创建
                onSubmit: function () {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            const time1 = new Date(this.form.startTime);
                            const time2 = new Date(this.form.endTime);
                            if (time1.getTime() > time2.getTime()) return alert('合同结束时间不能小于合同开始时间');
                            axios.post('/pc/staffUser', this.form).then(function (res) {
                                if (this.form.status == 1) {
                                    if (this.form.turnoverTime) {
                                        this.form.turnoverTime = ''
                                    }
                                }
                                alert('创建成功');
                                history.back()
                            }.bind(this));
                        } else {
                            this.$message.error("请检查是否填写完整");
                            return false;
                        }
                    });
                },
                //确定保存介绍
                quedingxieru: function () {
                    if (!this.inputValue) return this.$message.warning("内容不能为空");
                    var obj = { content: '', times: '' }
                    obj.content = this.inputValue
                    obj.times = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
                    this.form.introOne.unshift(obj);
                    this.inputValue = ''
                },
                openShow: function () {

                    this.show = true
                },
                confirm: function () {

                    this.show = false
                },
                handleClose: function () {

                    this.show = false
                },
            }
        });
        sessionStorage.removeItem('hxt-p');
    </script>
    </script>
</body>

</html>